<template>
    <div class="Listen">
        <h1>
            <router-link :to="{name:''}">
                听听
                <i class="fa fa-chevron-right"></i>
            </router-link>
        </h1>
        <article>
            <div class="ListenCom" v-for="{nickName,avatarUrl,item} in list" :key="item">
                <div class="img">
                    <img :src="avatarUrl">
                    <i class="fa fa-play"></i>
                </div>
                <span>
                    <p>
                        {{nickName}}
                    </p>
                    <p>
                        <!-- <i class="fa fa-user-o" id="faUser"></i> -->
                        <img :src="avatarUrl">
                        <a>{{nickName}}</a>
                    </p>
                </span>
            </div>
        </article>
    </div>
</template>

<script>
import {DJpopular} from '@/library/api/api'
export default {
    name:'Listen',
    data() {
        return {
            list:{}
        }
    },
    methods:{
        function() {
            DJpopular({}).then(res=>{
                // console.log(res);
                this.list = res.data.list.map(item=>{
                    return item
                })
                this.list.length = 5
            })
        }
    },
    created() {
        this.function()
    }
}
</script>

<style lang="scss" scoped>
@import './ListenAndWatch.scss'
</style>
